常用CSS屬性

color 字體顏色

color: red;
color: #AA2;

font-size 字體大小

font-size: 16px;
font-size: large;

font-family 字型

font-family: Verdana, Geneva, Tahoma, sans-serif;

text-align 文字對齊

可以對齊的不只有文字，而是元素內的東西都可以做對齊
預設靠左

text-align: left;
text-align: right;
text-align: end;

left、right跟stard、end有何不同呢？
left、right不用多說，就是左邊右邊。
而stard、end則是需要看父層屬性，
如果父層左到右，end子層就是右到左

text-indent 首行縮排

px 可用 16px 乘上 2(字元數) = 32px
pc 字元數

text-indent: 32px;
text-indent: 2pc;

text-decoration 文字裝飾

underline 底線
line-through 中線、刪除線

text-decoration: underline;
text-decoration: line-through;
text-decoration: none;

line-height 行距

行間距離計算方法是字體大小(font size)預設16 乘上倍數(1.5) = 24px
文字會在行距內上下置中
單行文字可透過設定行高與父元素相同達到垂直置中效果

line-height: normal;
line-height: 24px;
line-height: 1.5;

normal 數值取決於瀏覽器，通常為1.2

letter-spacing 字距、文字間距、字間距離

letter-spacing: 2px;

background 背景、背景圖片、背景顏色

background-color: green; 
background: greenyellow;
background: green url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Imgur_logo.svg/1200px-Imgur_logo.svg.png");

background-size: cover;

background 是縮寫，包含了以下屬性：
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
可同時設背景顏色及放背景圖片

background-image CSS背景放圖片

在<div>圖片背景中可以再放文字或表單，比起<img>元素有更多應用空間。
img可拖曳、背景圖不可被滑鼠拖拉。

網頁元素大小比圖片還大時，預設會自動重複圖片
可搭配去背png圖片

HTML

<div class="box"></div>

CSS

.box{
    width: 500px;
    height: 500px;
    background-image: url("https://picsum.photos/200/200");
}

background-repeat

圖片重複、圖片不重複、X軸上重複、Y軸上重複
(背景圖片漸層時常用)

background-repeat: repeat
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

background-color

可與背景圖片一起使用(圖片會在上層、顏色在下層)，
當漸層的背景圖長度不夠、文字內容卻多到需要向下延伸時，可定色到漸層圖的最底部顏色

background-color: #005599;

width、height 長度寬度高度

height: 20px;
width: 300px;

auto 如果左右都寫auto，會按照父元素的寬度平均分配空間出來
如果只設height或width其中一個值，會自動推算、推擠出另一個維度(高度或寬度)出來。

cursor 游標

設定游標移上物件時顯示的圖示，
讓使用者覺得是可點擊、可互動的效果

cursor: pointer;
cursor: wait;

border-radius 外框圓弧效果

border-radius: 50%;
border-radius: 100px 0 100px 0;

border-radius 依序分別是左上、右上、右下、左下

圓弧後可再增加border線條製造外框效果

linear-gradient 漸層效果

預設漸層上到下(to bottom)

background: linear-gradient(black, yellow);
background: linear-gradient(to top, black, green);
background: linear-gradient(to right, black, green);
background: linear-gradient(to bottom, black, green);
background: linear-gradient(to left, black, green);

box-shadow 陰影效果

box-shadow 依序為: x軸、y軸、渲染擴散、顏色

box-shadow: 15px 10px;
box-shadow: 15px 10px pink;
box-shadow: 15px 10px 6px pink;
box-shadow: 0px 0px 20px pink;